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1, INTRODUCTION 

The use of computers and mobile phone has brought great conveniences and contributions to society 
in daily activities. Both computer systems and mobile applications (apps) have been built to make people, 
even more, convenience in many aspects. With continuing penetration of the Internet into daily life, it has 
changed the definition of computers and mobile phones, and become an essential part of the peoples’ 
communication and daily life. While the web and mobile technologies have become everyday life, in order to 
face the new market environment which is in constant change, the company must place the customer in the 
centre of its attention [1]. Developing a website and mobile application makes it possible an excellent 
communication with the clients, and this leads to a constant adaptation of the company’s offer to the 
continuously changing customers’ requests. Due to this, the availability, and adequacy assessment in this 
situation are becoming increasingly requires. In order to study how users interact with the visual elements 
within the website and mobile apps, the Eye-tracking technology is increasingly applied to the usability 
study [2]. Today, many possibilities already exist where the usability of websites and mobile apps, among 
others, can be assessed with the help of Eye-tracking [2], [3]. Eye-tracking measures where a person is 
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looking, often used to measure how users interact with the visual elements, with the aims of improving its 
design and availability [4]. It shows where the user’s attention is focused and which paths are followed, 
provides an unobtrusive means to examine cognitively and attention to deal with. 

In general, different gender has different perspectives in most activities including online shopping 
and user interface design [5]. Recently, online shopping has grown in their popularity in line with growing of 
the Internet and shopping mobile apps on smartphones [6]. Mobile apps are designed and developed by 
developers and are available in app stores. Mobile user interface design is an essential in the mobile apps 
development process. A poor user interaction with mobile apps could lead to failure of apps [7]. 
User Interface design is a crucial part in mobile apps and website development and had claimed that mental 
model theory help developers in designing a user-friendly and strong visual hierarchy user interface for a 
mobile app and website [8], [9]. 

In recent years, HTMLS5 has emerged as a very popular way for building mobile apps, called mobile 
web apps. Mobile web apps looked very much like native apps but built at a much faster and cheaper rate in 
HTML/CSS. The mobile web apps can be reached the widest range of the devices by only one design. In this 
study, two different shopping mobile web app interface will be developed based on the existing gender-based 
users’ mental model pattern guidelines. The eye-tracking technology will be used to evaluate the developed 
interfaces. By analysing participants’ eye movement pattern, valuable insight into usability and other issues 
can be acquired [8]. Besides, the valuable information likes conclusions about the positioning of elements 
also can be drawn [10]. 

Nowadays, website and mobile apps developer still facing the problem of limited guidelines for 
proper user interface design. Vala et al. [7] and 11] mentioned that most of the mobile apps developers have 
been facing proper graphical user interface (GUI) design recently. Some of the existing guidelines for GUI 
design are only describing fundamental patterns or use cases [7]. Vala et al. [7] mentioned that there is a 
noticeable lack of studies in the area of mobile app design compared to web app user interface (UI) design. 
Moreover, [7] and [11] also stated that the bad interaction between a user’s of mobile apps and a GUI could 
lead to some misunderstandings, errors, and frustration from an inability to achieve a goal and could lead to 
failure of the mobile. Thus, the UI design is a crucial part of the development process, and it cannot be 
despised. Besides, [12] suggested that online shopping websites should focus more on female section instead 
of male section, as their research results shows that female have a higher ratio to shop online. In 
contrast, [13] identified male customers do more online shopping and outlay more money than women, and 
they do or are more likely to shop online in the future. Besides, [14] stated, even though most of the shopping 
is done by women, online purchasing often to be dominance by male consumers. As a result, different users’ 
expectation among users in online shopping is significantly affected by gender. Thus, the interface design for 
the shopping apps and website should not focus on a single gender, but need to consider both gender. 


2. METHODOLOGY 

Tobu ProX2-30, a mobile stand device and a Lenovo y400 laptop from SDS Associates has been 
used in this research. Tobii Pro X2-30 is a screen-based eye tracker that captures gaze data at 30 Hz, compact 
and affordable system that is perfect for studies outside of the lab and it has been designed to give us instant 
insights into visual attention in high-level fixation based research. The eye-tracking experiment was 
conducted at Universiti Teknologi Mara (UiTM), Melaka, Jasin, a public university and University Tenaga 
Nasional (UniTEN), a private university. A total of 31 participants was involved in the eye-tracking 
experiment. The participants were random students who were pursuing undergraduate programs from Faculty 
of Computer Science and Mathematics, UiTM and College of Computer Science and Information 
Technology, UniTEN. The eye-tracking experiment at U1TM was conducted in a lecturer's room. Whereas, 
at UniTEN, it was conducted in a computer lab. The eye tracker and mobile stand device in was set up based 
on the training provided by SDS Associates Sdn. Bhd and lighting conditions were controlled in a way that 
does not interfere with the eye tracker. Participants were recruited with the help of the lecturers at both of the 
universities for the user interface testing of adopted Lazada shopping mobile application. The participants 
who agreed to involve in our research were first given a consent form with the details of the research to be 
signed in order to confirm that he or she agrees to the procedure of the research. A brief explanation was 
given on how the experiment is going to be conducted and they were informed that the experiment is going to 
involve the tracking of their eye movement while they are doing tasks in the particular mobile application. 
First, the calibration was set for the participants. During this process, some difficulties were found, 
where some participant’s eye cannot be tracked due to various reasons. This is because the eye tracking 
technology has been developed to work well with people who have healthy eyes and normal visual acuity. 
In addition, the participants who wore glasses were made sure their lens are in good conditions with less 
scratches as it can cause difficulties in tracking their eye. After the calibration setup, some tasks were given 
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to the participants to be done on the adopted Lazada shopping mobile app based on female and male mental 
model patterns and their eye movement were tracked and recorded. After, they have finished their tasks, 
the recording was stopped and the participants were given some souvenirs as appreciation for their 
involvement in the eye-tracking experiment. 


3. RESULTS AND FINDINGS 

The eye-tracking experiment recorded every eye movement of the participants while they perform 
the tasks given in both female and male mental models based user interface design. The tasks given were 
limited to only features that have different location in the user interface design based on identified female and 
male mental model patterns in [13]. The recorded data were analyzed in the form of gaze plots. Gaze plots 
visualize a participant’s gaze pattern through a series of dots indicating fixation and fine lines indicating 
saccades. The size of the dots represents the duration of a fixation. Short fixations are indicated by small 
dots, while larger dots indicate a longer fixation. Gaze plot reveals the order of fixations indicated by 
numbers in the dots which enables researchers to analyze how a participant perceived an interface and which 
element were looked at first and which elements were gazed at last. The fixation point while they gazing the 
particular features when doing the tasks on different user interface design were analyzed based on the gaze 
data obtained in the eye-tracking experiment. 

The Table 1 contains analyzed gaze plot data that was obtained while the participants were 
performing tasks in female and male based user interface design. There were five invalid data that were 
found during the analysis of gaze replays. Five participants’ eye movement were failed to be detected by the 
eye tracking device. Those five participant data were coded s ‘NT’ in the Table 1. There may several reasons 
for where that the participant’s eye movements cannot be tracked at all or that a participant changes her 
seating position in a way so that her eyes are no longer within the eye tracking box. 


Table 1. Gaze Plot Data 


= Internal link Search Login Voice Product Categor Shopping cart Wishlist 
Participant Gender F M F M F é M F M F y F Pps M F M 
PO1 Female NT NT NT NT NT NT NT NT NT NT NT NT NT NT 
P02 Male NT NT 4 NT NT NT 6 4 NT 5 NT NT 4 NT 
P03 Male NT NT NT 9 NT 4 NT 4 7 7 5 7 4 7 
P04 Female NT NT 15 NT NT NT NT NT NT 8 NT NT NT NT 
PO5 Male NT NT 3 5 2 5 5 6 9 8 6 5 5) 4 
P06 Female NT NT 7 6 6 5 NT 9 9 4 6 4 7 18 
PO7 Female NT NT 4 NT 5 NT 7 3 4 9 6 2 5 8 
PO8 Male NT NT NT 5 NT 2 NT 8 8 4 4 6 6 13 
PO9 Male NT NT 3 4 3 5 3) 2 4 3 8 NT 7 NT 
P10 Female NT NT 6 2 2 NT NT 4 NT 8 2 4 NT 11 
Pll Female NT NT 7 2 3 NT NT 5 6 4 5 NT 4 6 
P12 Female 8 3 4 | 5 8 3 ig. 6 4 4 4 q 8 
P13 Female NT 3 NT NT NT ) NT 5 NT 6 NT 5 NT 6 
P14 Female 4 NT 2 NT 3 NT =) NT 4 NT 6 NT 7 NT 
P15 Male 7 3 12 8 6 3 3 4 5 6 5 7 4 8 
P16 Male 3 2) 8 5 4 3 8 6 4 6 5 10 4 4 
P17 Male 9 7 7 3 8 5 7 15 3 6 5 6 4 7 
P18 Male 5 3 4 4 6 6 6 3 4 6 4 5 6 4 
P19 Female NT NT NT NT NT NT NT NT NT NT NT NT NT NT 
P20 Male 5 NT 4 3 4 3 2 3 4 9 8 6 7 4 
P21 Female NT NT NT NT NT NT NT NT NT NT NT NT NT NT 
P22 Male 3 6 9 6 4 7 11 4 6 9 6 4 3 5 
P23 Female 2 NT 6 NT 2 4 3 NT 4 2 NT NT NT NT 
P24 Male 4 4 4 5 2 3 NT NT 3 3 10 2 6 5 
P25 Male NT NT NT NT NT NT NT NT NT NT NT NT NT NT 
P26 Male NT 6 4 7 NT 3 NT 6 6 4 NT 9 6 7 
P27 Female 2 NT | 8 5 4 6 8 11 6 NT 2 4 9 
P28 Male s) 3 7 5 9 7 7 6 9 7 10 4 3 ) 
P29 Female NT NT NT NT NT NT NT NT NT NT NT NT NT NT 
P30 Female NT NT 3 4 2 NT 2 3 6 9 2 6 NT 5 
P31 Male NT NT 6 3 NT NT 4 3 3 3 9 2 6 NT 


NT = Not Tracked; F = Female Interface; M = Male Interface 
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Seven complete data were obtained, where the eye movement of those participants was successfully 
tracked completely for all the tasks given. The complete data were from participant 12, participant 15, 
participant 16, participant 17, participant 18, participant 22 and participant 28. The remaining data were 
partially tracked for only certain tasks. The abbreviation “NT” indicates the failure in tracking the particular 
feature. The numbers in the Table 1 shows the fixation point the participants required in order to locate the 
particular feature in that specific user interface design. The fixation points were compared for the feature in 
both interfaces in order to evaluate the identified female and male mental model pattern in [13]. The smaller 
the fixation point participant required in order to locate at the specific feature on the user interface design, 
the more better is the location of the feature on the interface as they only required few fixations to locate 
the feature. 

Analysis of the gaze plat shows that the majority of the male participants could find the internal link 
on the male mental model based user interface design as they only required few fixation in order to find and 
gaze at the internal link. 4 male participants out of 6 male participants with successful gaze data for the 
internal link were easily found the internal link with the shortest fixation point. Therefore, it justifies the 
location of internal link in male mental model pattern. Whereas, female only one data has been detected, 
SO no comparison can be made, as shown in Figure 1. 





Figure 1. Fixation of participant 15 for internal link on female and male UID 


As for the search feature as shown in Figure 2, the majority of the male participants prefers the 
search button as the correct position as in male mental model pattern as 7 out of the 12 male participants 
easily located the search with few fixation points. As for female participants, they prefer the search button to 
be on top as 3 out of the 6 participants easily detected the search location with few fixation points in the male 
mental model based interface and the remaining 3 participants were able to find the search button with few 
fixation points in the female mental model based user interface. 





Figure 2. Fixation of participant 22 for search on female and male UID 
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Based on Figure 3, the majority of the male participants’ eye movement towards the login button 
were better in a male mental model based user interface design. This was proved through the analyzed data 
which show that the majority of the male participants were able to locate the login easily with the fewer 
fixations in male user interface design compared to the female mental model based user interface. 
This justifies the location of the login in the male mental model pattern which is on the top left. As for the 
female participants, 2 participants required fewer fixations in order to find the login in female mental model 
pattern based user interface, whereas, the other two prefers the location of login in male mental model based 
user interface design. 





Figure 3. Fixation of participant 15 for login on female and male UID 


The majority of the male participants only needed fewer fixations to find the voice recognition 
button on male user interface design compared to the female user interface design. 6 out of 10 male 
participants found the voice recognition on male mental model based interface with fewer fixations. 
For example in Figure 4, participant 22 who is male able to find voice recognition on the male user interface 
at the 4" fixation point, whereas in female user interface design he only was able to find the button at the 11" 
fixation point. This reveals that the location of the voice recognition button in the male mental model pattern 
is in the correct position. The majority of the female participants also only required fewer fixations in finding 
the voice recognition in user interface that was designed based on the female mental model pattern. 
This reveals that female prefers voice recognition on top right. 





Figure 4. Fixation of participant 22 for voice recognition on female and male UID 


Moreover, the analyzed data indicate that the majority of the male participants were able to find and 
do tasks quickly related to the product category in female user interface compared to the male user interface 
with fewer fixations, as shown in Figure 5. This indicates that male prefers the product category to be on top 
which is horizontal. Whereas, on the other hand, female prefers the product category to be on the left as in 
male user interface design. This was shown from the analyzed data which shows that the female were able to 
identify he product category in male user interface design with fewer fixations compared on the female user 
interface design. 
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Figure 5. Fixation of participant 22 for product category on female and male UID 


As for shopping cart as shown in Figure 6, the majority of the male were able to find the feature in 
both female and male user interface design at fewer fixations as the shopping cart location in both female and 
male user interface design is in the top right of the interface. Whereas, the majority of the female participants 
were preferring the location of the shopping cart on the male user interface design which is near to the 
internal link. Most of them were successful in finding the shopping cart with fewer fixations in the male user 
interface. 

The majority of the male participants identified the wishlist with fewer fixations on female user 
interface design as it was located on the main user interface, as shown in Figure 6. On the male user interface 
design, the wish list is located in internal link which have caused the increase in fixation point in order to find 
the wish list. The majority of the female participants were able to identify the wish list on the female mental 
model based user interface with fewer fixations compared to the male mental model based user interface. 
These analyzed data indicate that the wish list should be on the main user interface instead in internal link. 





Figure 6. Fixation of participant 22 for wishlist on female and male UID 


The eye tracking experiment justifies the identified male mental model pattern [13] as the majority 
of the male participants’ gaze plot reveals that male prefers the male mental model based user interface. 
This is because the male participants were able to find the most of the features except product category and 
wish list in male user interface design with fewer fixations compared to the female user interface design. 
Whereas, female participants were balanced in both male and female user interfaces as most of them could 
find the most of the features in both interfaces with fewer fixations except for the product category and 
shopping cart. They prefer the location of product category and shopping cart as in the male user interface 
design with the success in finding with fewer fixations. 


4. CONCLUSION 

As a conclusion, the Table 2 shows the number of participants who were able to find the features 
with the fewer fixations in the particular user interface. The higher number for the particular features in the 
table justifies the location of the features on a user interface design. This justification identifies a standard 
guideline that can be utilized by developers in the user interface design process of mobile shopping apps. 
Most of the features except wish list were found with fewer fixations on the male user interface design by the 
participants. This confirms the location of the particular features based on male mental model pattern 
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guideline. Wish list was found easily with fewer fixations on female mental model pattern based user 
interface design. Therefore, the location of the wish list has been confirmed based on female mental model 
pattern guideline. Based on the analyzed data, a standard mental model pattern which is acceptable for both 
female and male was identified for shopping mobile app user interface design. 


Table 2. Analyzed Data Based on Physical Features 


Physical Features Female User Interface Male User Interface 
Internal link 3 6 
Search 8 11 
Login 7 8 
Voice Recognition el 8 
Product Category 1] 13 
Shopping Cart 8 10 
Wish list 13 5 


The contributions made in this paper help to provide a better understanding of the evaluation of 
mobile web app interfaces. In particular, the research considerably expands the existing understanding of 
how users interact with the shopping mobile web app and the impact of Eye-tracking data in re-design the 
shopping mobile web app interface. These contributions can help to improve the development of more 
effective commercial shopping app interfaces. Future works could include different Eye-tracking analysis 
technique including Scanpath Trending Analysis (STA) and AOI may use to analyse the user’s eye 
movement data. In this research, the Eye-tracking analysis technique including Scanpath + Cued RTA and 
Heatmap have been used to evaluate the user’s eye movement data. 
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